<template>
  <header id="header" class="relative min-h-screen flex items-center justify-center overflow-hidden">
    <!-- 背景渐变 -->
    <div class="absolute inset-0 bg-gradient-to-br from-indigo-900 to-purple-900 opacity-90"></div>

    <!-- 背景网格 -->
    <div class="absolute inset-0 opacity-10">
      <svg viewBox="0 0 100 100" preserveAspectRatio="none" class="absolute inset-0 w-full h-full">
        <path d="M0,0 L100,0 L100,100 L0,100 Z" fill="url(#grid)" />
      </svg>
      <defs>
        <pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse">
          <path d="M 10 0 L 0 0 0 10" fill="none" stroke="currentColor" stroke-width="0.5" />
        </pattern>
      </defs>
    </div>

    <div class="container mx-auto relative z-10">
      <div class="flex flex-col md:flex-row items-center justify-between gap-8">
        <div class="flex-1 animate-slide-up delay-100">
          <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold tracking-tight mb-2">
            <span class="bg-clip-text text-transparent bg-gradient-to-r from-white to-blue-300">我与小风车的故事</span>
          </h1>
          <p class="text-[clamp(1rem,2vw,1.25rem)] text-blue-200 max-w-2xl">
            记录我们在<span class="font-semibold text-white">QQ群</span>里的美好回忆与精彩瞬间
          </p>
        </div>

        <div class="animate-slide-up delay-200 w-40 h-40 md:w-48 md:h-48 relative rounded-full overflow-hidden border-4 border-white/20 shadow-xl">
          <img
            src="https://photo.aoyudi.top/qqgroup.png"
            alt="群聊头像"
            class="w-full h-full object-cover"
          />
          <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent flex items-end justify-center p-4">
            <span class="text-sm font-medium bg-black/10 py-1 rounded-full">
              玛卡巴卡的小风车
            </span>
          </div>
        </div>
      </div>

      <div class="mt-12 flex flex-wrap justify-center gap-3 animate-slide-up delay-300">
        <span class="bg-blue-600/50 px-4 py-2 rounded-full text-sm font-medium">
          <i class="fa fa-users mr-1"></i> 群成员: 125人
        </span>
        <span class="bg-indigo-600/50 px-4 py-2 rounded-full text-sm font-medium">
          <i class="fa fa-calendar mr-1"></i> 成立时间: 2022-04-18
        </span>
      </div>

      <div class="mt-12 animate-slide-up flex justify-center delay-500">
        <button
          class="px-8 py-4 bg-gradient-to-r from-blue-600 to-purple-600 rounded-full font-medium text-lg transition-all duration-300 shadow-lg hover:shadow-glow-lg transform hover:scale-105"
          @click="scrollWithTransition"
        >
          开始回顾 <i class="fa fa-arrow-down ml-2 animate-bounce"></i>
        </button>
      </div>

      <!-- 向下滚动指示 -->
      <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
        <a href="#message-cloud" class="text-white/70 hover:text-white transition-colors">
          <i class="fa fa-angle-down text-3xl"></i>
        </a>
      </div>
    </div>
  </header>
</template>

<script setup>
import { onMounted } from 'vue'

const scrollWithTransition = () => {
  // 先滚动到页面中部，添加过渡效果
  window.scrollTo({
    top: window.innerHeight / 2,
    behavior: 'smooth'
  })

  // 延迟后再定位到#message-cloud
  setTimeout(() => {
    const element = document.getElementById('message-cloud')
    if (element) {
      element.scrollIntoView({ behavior: 'smooth', block: 'start' })
    }
  }, 800) // 500ms延迟
}

onMounted(() => {
  // 导航栏滚动效果
  const navbar = document.getElementById('navbar')
  window.addEventListener('scroll', () => {
    if (window.scrollY > 50) {
      navbar.classList.add('py-2', 'shadow-lg')
      navbar.classList.remove('py-4')
    } else {
      navbar.classList.add('py-4')
      navbar.classList.remove('py-2', 'shadow-lg')
    }
  })
})
</script>

<style scoped>
header {
  animation: fadeIn 0.8s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-slide-up {
  opacity: 0;
  animation: slideUp 0.8s ease-out forwards;
}

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
</style>
